<template>
    <div class="fdx-sticky-box">
        <slot></slot>
    </div>
</template>

<script>
import { sticky } from './sticky'
export default {
    name: 'stickyBar',
    props: ['scrollBox', 'offset', 'checkStickySupport'],
    mounted() {
        this.$nextTick(() => {
            this.bindSticky()
        })
    },
    methods: {
        bindSticky() {
            sticky(this.$el, {
                scrollBox: this.scrollBox,
                offset: this.offset,
                checkStickySupport: typeof this.checkStickySupport === 'undefined' ? true : this.checkStickySupport
            })
        }
    }
}
</script>

<style lang="scss">
@import '../../assets/sass/_vars.scss';
@import '../../assets/sass/_mixins.scss';
.fdx-sticky-box {
    z-index: $zIndex-sticky;
}
.fdx-sticky {
    width: 100%;
    position: sticky;
    top: 0;
}
.fdx-fixed {
    width: 100%;
    position: fixed;
    top: 0;
    transform: translate3d(0, 0, 0);
}
.fdx-sticky-fill {
    display: none;
}
.fdx-fixed + .fdx-sticky-fill {
    display: block;
}
</style>